<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .layui-table th{
            min-width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
<a class="layui-btn" href="/Movie/moviePage" >返回首页</a>
<button class="layui-btn" onclick="insertLabel()">新增</button>
<table id="labelInfoTable" class="layui-table" lay-size="lg"></table>


<script>

    let labelInfo="";
    labelInfo+= '<colgroup><col width="150"><col width="200"><col></colgroup>';
    labelInfo+='<thead class="layui-anim layui-anim-up"><tr><th>标签号</th><th>标签名</th><th></th></tr></thead><tbody>';

    $(document).ready(function () {
        //获取全部标签信息
        $.ajax({
            async: true,
            url: "[[@{/label/allLabel}]]",
            type: "post",
            success: function (data) {
                if(data.code=="0") {
                    layer.msg(data.msg);
                }
                else {
                    for(let i= 0;i<data.data.length;i++){
                        labelInfo+='<tr class="layui-anim layui-anim-up"><th>' +
                            data.data[i].labelid+
                            '</th><th>'+
                            data.data[i].labelname+
                            '</th><th><div class="layui-btn-container"><button type="button" class="layui-btn" onclick="deleteLabel(' +
                            data.data[i].labelid +
                            ')">删除</button>' +
                            '<button type="button" class="layui-btn" onclick="updateLabel(' +
                            "'" +
                            data.data[i].labelid +
                            "'"+
                            ')">修改</button></div></th></tr>';
                    }
                    labelInfo+='</tbody>';
                    document.getElementById("labelInfoTable").innerHTML=labelInfo;
                    layer.msg('加载完毕');
                }
            }
        });
        return false;
    });

    function deleteLabel(labelid){
        $.ajax({
            url: "[[@{/label/delete}]]",
            data:{
                labelid:labelid,   //与controller中的形参名相同
            },
            type:"POST",
            dataType:"JSON",
            success: function (data) {
                if(data.code == "1"){
                    layer.msg(data.data, { time: 1000 }, function () {
                        window.location.reload();
                    });
                }
                else {
                    layer.msg(data.msg,{time:1000},function (){
                        window.location.href="/user/loginPage";
                    });
                }
            }
        });
        return false;
    }

    function updateLabel(labelid){
        var layer = layui.layer;
        var form = layui.form;
        layer.open({
            type: 1
            ,resize: false
            ,shadeClose: true
            ,area: '350px'
            ,title:"标签名修改"
            ,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'
                ,'<li class="layui-form-item">'
                ,'<label class="layui-form-label">标签名</label>'
                ,'<div class="layui-input-block">'
                ,'<input class="layui-input" lay-verify="required" name="labelname">'
                ,'</div>'
                ,'</li>'

                ,'<li class="layui-form-item" style="text-align:center;">'
                ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                ,'</li>'
                ,'</ul>'].join('')
            ,success: function(layero, index){
                layero.find('.layui-layer-content').css('overflow', 'visible');

                form.render().on('submit(*)', function(data){
                    var field = data.field;
                    //发送修改请求
                    $.ajax({
                        url:'[[@{/label/updata}]]',    //thymeleaf在ajax中设置地址行形式
                        data:{
                            labelid:labelid,
                            labelname:field.labelname,
                        },
                        type:"POST",
                        dataType:"JSON",
                        success:function (upData){
                            if(upData.code=="1"){
                                //修改成功
                                layer.msg(upData.data, { time: 1000 }, function () {
                                    window.location.reload();
                                });
                            }else{
                                //修改失败
                                layer.msg(upData.msg);
                            }
                        }
                    });

                    layer.close(index); //关闭层
                });
            }
        });
        return false;
    }


    function insertLabel(){
        var layer = layui.layer;
        var form = layui.form;
        layer.open({
            type: 1
            ,resize: false
            ,shadeClose: true
            ,area: '350px'
            ,title:'新增标签'
            ,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">'

                ,'<li class="layui-form-item">'
                ,'<label class="layui-form-label">标签名</label>'
                ,'<div class="layui-input-block">'
                ,'<input class="layui-input" lay-verify="required" name="labelname">'
                ,'</div>'
                ,'</li>'


                ,'<li class="layui-form-item" style="text-align:center;">'
                ,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
                ,'</li>'
                ,'</ul>'].join('')
            ,success: function(layero, index){
                layero.find('.layui-layer-content').css('overflow', 'visible');

                form.render().on('submit(*)', function(data){
                    var field = data.field;
                    //添加修改请求
                    $.ajax({
                        url:'[[@{/label/insert}]]',    //thymeleaf在ajax中设置地址行形式
                        data:{
                            labelname:field.labelname,
                        },
                        type:"POST",
                        dataType:"JSON",
                        success:function (upData){
                            if(upData.code=="1"){
                                //修改成功
                                layer.msg(upData.data, { time: 1000 }, function () {
                                    window.location.reload();
                                });
                            }else{
                                //修改失败
                                layer.msg(upData.msg);
                            }
                        }
                    });

                    layer.close(index); //关闭层
                });
            }
        });
        return false;
    }


</script>

<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>